<template>
    <div class="settings-view">
      <h1 class="view-title">系统设置</h1>
      
      <el-card class="settings-card">
        <template #header>
          <div class="card-header">
            <h3>API密钥管理</h3>
          </div>
        </template>
        
        <el-form label-position="top">
          <el-form-item label="OpenAI API Key">
            <el-input 
              v-model="settings.apiKey" 
              placeholder="输入您的OpenAI API Key" 
              show-password 
              clearable
            />
            <div class="form-tip">
              用于视频分类、文案生成等功能的OpenAI API密钥，设置后将在所有功能中共享使用
            </div>
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="saveSettings" :loading="saving">
              保存设置
            </el-button>
            <el-button @click="resetSettings" plain>
              重置
            </el-button>
          </el-form-item>
        </el-form>
        
        <el-divider>
          <small>系统设置 v1.0</small>
        </el-divider>
        
        <div class="settings-info">
          <p>当前版本仅支持OpenAI API Key配置，其他设置请在各功能页面中设置。</p>
          <p>所有设置均存储在本地浏览器中，不会上传到服务器。</p>
        </div>
      </el-card>
    </div>
  </template>
  
  <script>
  import { defineComponent, reactive, ref, onMounted } from 'vue';
  import { ElMessage } from 'element-plus';
  import settingsService from '@/services/settingsService';
  
  // 配置定义，便于将来扩展
  const SETTINGS_CONFIG = {
    // 全局通用设置的key
    globalSettingsKey: 'global_settings',
    
    // 默认设置值
    defaultSettings: {
      apiKey: ''
    }
  };
  
  export default defineComponent({
    name: 'SettingsView',
    setup() {
      // 当前设置
      const settings = reactive({...SETTINGS_CONFIG.defaultSettings});
      const saving = ref(false);
      
      // 加载设置
      const loadSettings = () => {
        try {
          // 首先尝试从全局设置中加载
          const globalSettings = settingsService.loadSettings(SETTINGS_CONFIG.globalSettingsKey);
          
          if (globalSettings && globalSettings.apiKey) {
            settings.apiKey = globalSettings.apiKey;
            return;
          }

        } catch (error) {
          console.error('加载设置失败:', error);
        }
      };
      
      // 保存设置
      const saveSettings = () => {
        saving.value = true;
        
        try {
          // 保存到全局设置
          const globalSuccess = settingsService.saveSettings(SETTINGS_CONFIG.globalSettingsKey, {
            apiKey: settings.apiKey
          });
          
          if (globalSuccess) {
            ElMessage.success('设置已保存');
          } else {
            throw new Error('保存设置失败');
          }
        } catch (error) {
          console.error('保存设置失败:', error);
          ElMessage.error('保存设置失败，请重试');
        } finally {
          saving.value = false;
        }
      };
      
      // 重置设置
      const resetSettings = () => {
        Object.assign(settings, SETTINGS_CONFIG.defaultSettings);
      };
      
      // 组件挂载时加载设置
      onMounted(() => {
        loadSettings();
      });
      
      return {
        settings,
        saving,
        saveSettings,
        resetSettings,
        SETTINGS_CONFIG
      };
    }
  });
  </script>
  
  <style scoped>
  .settings-view {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .view-title {
    margin-bottom: 20px;
    color: #303133;
  }
  
  .settings-card {
    margin-bottom: 20px;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .card-header h3 {
    margin: 0;
  }
  
  .form-tip {
    font-size: 12px;
    color: #909399;
    margin-top: 5px;
  }
  
  .settings-info {
    font-size: 14px;
    color: #606266;
    margin-top: 20px;
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 4px;
  }
  </style>